<template>
    <div>
      <!-- 面包屑导航区 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>后勤服务</el-breadcrumb-item>
        <el-breadcrumb-item>申请报修</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 卡片视图区 -->
      <el-card>
        <el-row>
          <el-form :model="applyRepairForm" :rules="applyRepairFormRules" ref="applyRepairFormRef" label-width="100px">
            <el-row>
              <el-col :span="6">
                <el-form-item label="申请宿舍" prop="dormitoryId">
                  <el-cascader
                    placeholder="请选择宿舍"
                    v-model="applyRepairForm.dormitoryId"
                    :options="cascadeDormitoryList"
                    :props="{ expandTrigger: 'hover'}"
                    filterable
                    clearable
                    separator="-">
                  </el-cascader>
                </el-form-item>
              </el-col>
              <el-col :span="18">
                <el-form-item label="申请日期" prop="repairTime">
                  <el-date-picker
                    v-model="applyRepairForm.repairTime"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
            </el-row>
            <el-form-item label="申请原因" prop="repairReason">
              <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="applyRepairForm.repairReason"
                maxlength="100"
                show-word-limit>
              </el-input>
            </el-form-item>
          </el-form>
        </el-row>
        <!-- 底部区域 -->
        <el-row style="margin-left: 85%">
          <el-button @click="cancel">清 空</el-button>
          <el-button type="primary" @click="addRepair">提 交</el-button>
        </el-row>
      </el-card>

    </div>
</template>

<script>
    export default {
       data() {
         return {
           cascadeDormitoryList: [],
           applyRepairForm: {
             dormitoryId: '',
             repairTime: '',
             repairReason: ''
           },
           applyRepairFormRules: {
             dormitoryId: [
               {type: 'array', required: true, message: '请选择申请宿舍', trigger: 'blur'},
             ],
             repairTime: [
               {required: true, message: '请选择日期', trigger: 'blur'},
             ],
             repairReason: [
               {required: true, message: '请输入申请原因', trigger: 'blur'},
             ]
           },

         }
       },

      created() {
        this.getBuildingList()
      },

      methods: {
        getBuildingList() {
          //发送请求 获取楼栋列表信息
          this.$axios.get(this.$http+'/buildingManageController/getBuildingIdList').then(res => {
            //楼栋列表
            this.buildingList = res.data.datas.buildingList;
            //宿舍列表
            let that = this;
            //遍历楼栋列表，设置value和label值
            res.data.datas.buildingList.forEach(function (item) {
              let buildings = {value: item.buildingId, label: item.buildingNumber, children: []}
              //遍历宿舍列表，设置值
              try {
                item.dormitoryList.forEach(function (childrenItem) {
                  if (childrenItem.dormitoryId === null) //如果寝室为空，跳过此次赋值
                    throw new Error("抛出异常跳出");
                  let dormitory = {value: childrenItem.dormitoryId, label: childrenItem.dormitoryRoom}
                  buildings.children.push(dormitory)
                })
              }catch (e) {}
              that.cascadeDormitoryList.push(buildings)
            })
            console.log(this.cascadeDormitoryList)
          }).catch(err => {
            this.$message.error("楼栋列表请求失败"+err);
          });
        },

        /* 提交申请信息 */
        addRepair() {
          this.$refs.applyRepairFormRef.validate(valid => {
            if (!valid) return;
            this.applyRepairForm.dormitoryId = this.applyRepairForm.dormitoryId[1];
            this.$axios.post(this.$http + '/repairManageController/addRepair',this.applyRepairForm).then(res => {
              this.cancel();
              if (res.data.code === 100)
                return this.$message.error("后台处理错误，申请失败");
              this.$message.success("申请成功,等待宿管处理");
            })
          })

        },

        //对内容进行清空
        cancel() {
          this.$refs.applyRepairFormRef.resetFields();
        },
      }


    }
</script>

<style scoped>

</style>
